<template>
<el-dialog
    :title="$t('plus.product_rules')"
    v-model="dialogVisible"
    @close="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form size="small" :model="form" ref="form">
      <el-form-item :label="$t('plus.product_name')" :label-width="formLabelWidth">
        <span>{{productModel.productName}}</span>
      </el-form-item>
      <el-form-item :label="$t('plus.enable_individual_distribution')" :label-width="formLabelWidth">
        <el-radio-group v-model="form.isIndAgent" :disabled="true">
          <el-radio :label="1">{{$t('plus.enable')}}</el-radio>
          <el-radio :label="0">{{$t('plus.disable')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.isIndAgent == 1 && isAgent == 1">
        <el-form-item :label="$t('plus.commission_type')" :label-width="formLabelWidth">
          <el-radio-group
            v-model="form.agentMoneyType"
            :disabled="true"
            @change="changeMoneyType"
          >
            <el-radio :label="10">{{$t('plus.percentage')}}</el-radio>
            <el-radio :label="20">{{$t('plus.fixed_amount')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('plus.individual_distribution_setting')" :label-width="formLabelWidth">
          <el-input
            type="number"
            min="0"
            v-model="form.firstMoney"
            :disabled="true"
            class="max-w460"
          >
            <template #prepend> {{$t('plus.commission_level_1')}} </template>
            <template #append>
              {{unit}}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label=""
          v-if="basicSetting.level >= 2"
          :label-width="formLabelWidth"
        >
          <el-input
            :disabled="true"
            type="number"
            min="0"
            v-model="form.secondMoney"
            class="max-w460"
          >
            <template #prepend> {{$t('plus.commission_level_2')}} </template>
            <template #append>
              {{unit}}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label=""
          v-if="basicSetting.level >= 3"
          :label-width="formLabelWidth"
        >
          <el-input
            :disabled="true"
            type="number"
            min="0"
            v-model="form.thirdMoney"
            class="max-w460"
          >
            <template #prepend> {{$t('plus.commission_level_3')}} </template>
            <template #append>
              {{unit}}
            </template>
          </el-input>
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <!--    <div class="dialog-footer">-->
      <!--      <el-button @click="dialogFormVisible(false)">取 消</el-button>-->
      <!--      <el-button type="primary" @click="saveProduct" :loading="loading">确 定</el-button>-->
      <!--    </div>-->
    </template>
  </el-dialog>
</template>

<script>
import AgentPorductApi from "@/api/plus/agent/product.js";
export default {
  data() {
    return {
      form: {
        isIndAgent: 0
      },
      unit: "%",
      isAgent: 0,
      basicSetting: {},
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      loading: false
    };
  },
  props: ["open_agent", "productModel"],
  created() {
    this.isAgent = this.productModel.isAgent;
    this.dialogVisible = this.open_agent;
    this.getData();
  },
  methods: {
    getData() {
      let self = this;
      AgentPorductApi.toEditProduct({
        productId: self.productModel.productId
      }).then(res => {
        console.log(self.form);
        if (res.data.agentProduct == null) {
          self.form = {
            isIndAgent: 0,
            agentMoneyType: 10
          };
        } else {
          self.form = res.data.agentProduct;
        }
        self.basicSetting = res.data.basicSetting;
      }).catch(error => {});
    },
    /*换算单位*/
    changeMoneyType: function (val) {
      if (val == "10") {
        this.unit = "%";
      } else {
        this.unit = $t("plus.unit_yuan");
      }
    },
    /*保存*/
    saveProduct() {
      let self = this;
      let params = self.form;
      params.productId = self.productModel.productId;
      params.isAgent = self.isAgent;
      self.loading = true;
      AgentPorductApi.editProduct(params).then(data => {
        self.loading = false;
        ElMessage({
          message: data.msg,
          type: "success"
        });
        self.dialogFormVisible(true);
      }).catch(error => {
        self.loading = false;
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("closeDialog", {
          type: "success",
          openDialog: false
        });
      } else {
        this.$emit("closeDialog", {
          type: "error",
          openDialog: false
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.img {
  margin-top: 10px;
}
</style>

